@use '../core' as *;

.seriesLink {
    position: relative;
    width: 100%;
    font-weight: var(--text-regular);

    &:hover .arrowIcon {
        --color-icon: var(--color-link-hover);

        transform: translateX(2px);
    }

    @media screen and (min-width: $breakpoint-gallery-small) {
        width: auto;
        top: -3px;
        margin-left: $spacing-size-4;
    }
}

.seriesLink .arrowIcon {
    --icon-size: 1.125em;

    position: relative;
    display: inline-block;
    top: -1px;
    left: 0;
    transition: transform $transition-default-timing;
}
